<template>
  <div class="promotionInvitation">
    <div class="personInfo">
      <p>Star River</p>
      <p>邀请好友即可获得重磅奖励</p>
      <p>邀请好友认购算力成功，即可奖励10%算力券</p>
    </div>
    <div class="promotionLink">
      <a-row :gutter="200">
        <a-col :span="12">
          <a-input style="display: none" id="copyInput"></a-input>
          <p class="linkName">邀请链接</p>
          <div class="link-key">
            <a-input v-model="linkKey" id="textDiv">
              <a slot="addonAfter" class="copy1" :data-clipboard-text="linkKey" @click="copyLink('.copy1')">
                复制
              </a>
            </a-input>
          </div>
          <p class="linkName">邀请码</p>
          <div>
            <a-input v-model="inviteData.inviteCode">
              <a slot="addonAfter" class="copy2" :data-clipboard-text="inviteData.inviteCode"
                 @click="copyLink('.copy2')">
                复制
              </a>
            </a-input>
          </div>
        </a-col>
        <a-col :span="12">
          <p class="linkName">邀请明细</p>
          <div class="promotionNum">
            <div>
              <p class="name">当前推广级别</p>
              <p class="number">{{levelText[inviteData.level]}}</p>

              <p class="name">累计邀请人数</p>
              <p class="number">{{inviteData.userNum}}</p>

            </div>
            <div>
              <p class="name">累计购买人数</p>
              <p class="number">{{inviteData.buyerNum}}</p>

              <p class="name">团队累计购买量（TB）</p>
              <p class="number">{{inviteData.powers}}</p>
            </div>
          </div>
        </a-col>
      </a-row>
    </div>
    <div class="appDownload">
      <p>Star River App 下载</p>
      <p>功能开发中，敬请期待</p>
    </div>
  </div>

</template>

<script>
  import Clipboard from 'clipboard'
  import { getInviteDetailInfo } from '../serves/index'
  import { eventBus } from '@/eventBus';

  const levelText = ['普通用户', 'P1级别', 'P2级别', 'P3级别', 'P3S级别', '分公司', '商学院'];

  export default {
    name: "PromotionInvitation",
    data() {
      return {
        levelText,
        linkKey: '',
        linkCode: '',
        inviteData: {}
      }
    },
    mounted() {
      this.getInviteDetailInfo()
    },
    methods: {
      getInviteDetailInfo() {
        getInviteDetailInfo().then(res => {
          if (res.status == 200 && res.data.status.code == 200) {
            this.inviteData = res.data.data
            this.linkKey = `http://xinghejingyu.com/register?inviteCode=${this.inviteData.inviteCode}`
          } else if (res.data.status.code == 450) {
            this.$message.warning(res.data.message)
            eventBus.$emit('isShow', false);
          } else {
            this.$message.warning(res.data.message)
          }
        })
      },
      copyLink(val) {
        let clipboard = new Clipboard(val) // 这里可以理解为选择器，选择上面的复制按钮
        clipboard.on('success', e => {
          this.$message.success("复制成功！")
          // 释放内存
          clipboard.destroy()
        })
        clipboard.on('error', e => {
          // 不支持复制
          this.$message.warning("电脑或手机不支持复制！")
          // 释放内存
          clipboard.destroy()
        })
      }
    }
  }
</script>

<style lang="scss">
  .promotionInvitation {
    background: #000;
    padding: 50px 200px;

    .personInfo {
      text-align: left;
      color: #fff;

      p {
        margin-bottom: 0px;
      }

      p:nth-child(1) {
        text-align: center;
        font-size: 30px;
        font-weight: 700;
        color: #28FFCA;
      }

      p:nth-child(2) {
        text-align: center;
        font-size: 30px;
        color: #fff;
      }

      p:nth-child(3) {
        text-align: center;
      }
    }

    .promotionLink {
      margin-top: 80px;

      .linkName {
        text-align: left;
        color: #fff;
      }

      .link-key {
        margin-bottom: 20px;
      }

      .ant-input {
        color: #fff;
        background-color: rgba(130, 101, 255, 0.4);
        border: none;
      }

      .ant-input-group-addon {
        a {
          color: #380CF4;
        }
      }

      .promotionNum {
        display: flex;
        justify-content: space-between;

        p {
          text-align: left;
        }

        .name {
          color: #7A89AA;

        }

        .number {
          color: #fff;
          font-weight: 700;
          font-size: 16px;

        }
      }

    }

    .appDownload {
      margin-top: 80px;

      p:nth-child(1) {
        text-align: center;
        font-size: 30px;
        font-weight: 700;
        color: #fff;
      }
    }
  }

  @media screen and (max-width: 800px) {
    .promotionInvitation {
      background: #000;
      padding: 50px 20px;

      .personInfo {
        text-align: left;
        color: #fff;

        p:nth-child(1) {
          font-size: 24px;
        }

        p:nth-child(2) {
          font-size: 18px;
        }
      }

      .ant-col-12 {
        width: 100%;
        font-size: 12px !important;
        padding: 10px 30px;
      }

      .promotionLink {
        margin-top: 50px;

        .linkName {
          text-align: left;
          color: #fff;
        }

        .link-key {
          margin-bottom: 10px;
        }

        .ant-input {
          color: #fff;
          background-color: rgba(130, 101, 255, 0.4);
          border: none;
        }

        .ant-input-group-addon {
          a {
            color: #380CF4;
          }
        }

        .promotionNum {
          display: flex;
          justify-content: space-between;
          font-size: 12px;

          p {
            text-align: left;
          }

          .name {
            color: #7A89AA;

          }

          .number {
            color: #fff;
            font-weight: 700;
            font-size: 16px;

          }
        }

      }

      .appDownload {
        margin-top: 30px;

        p:nth-child(1) {
          font-size: 24px;
        }
      }
    }
  }
</style>
